<template>
  <el-container id="app"
                style="scroll:no">
    <el-header class='header-bg'
               v-if="!test && ewsSso"
               style="background-color:#343B4B;padding:0;">
      <img src="./assets/images/header.png"
           alt
           style="height:100%" />
      <div style="float:right;margin-right:20px;line-height:60px; color:#fff;font-size:20px;">{{userIds}}<i style="margin-left:10px;"
           @click="logout"
           class="el-icon-switch-button
"></i> </div>
    </el-header>
    <el-header class='header-bg'
               v-if="test"
               style="background-color:#343B4B;padding:0;">
      <img src="./assets/images/header.png"
           alt
           style="height:100%" />
      <el-select v-model="userId"
                 placeholder="请选择"
                 filterable
                 @change="changeUserId"
                 style="float:right;margin-right:20px;line-height:60px;">
        <el-option v-for="item in options"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"></el-option>
      </el-select>
    </el-header>
    <el-container style="height:100%">

      <el-aside width="5%"
                v-if="test || ewsSso"
                class="dingweifu left-handle-button rolling-style">
        <div class="text-center-titel"
             @click="interact"
             v-if="!ewsSso">
          <div class="interact"
               :style="{background:titleId == 0 ?'url(' + require('@/assets/images/menu_icon.png') +') -62px -163px':'url(' + require('@/assets/images/menu_icon.png') +') -62px -246px'}">
          </div>
          <p :class="titleId == 0 ? 'is-active' : ''">交互</p>
        </div>
        <div class="text-center-titel"
             @click="wordOrder"
             v-show="btnStates.EWS_order">
          <div class="interact"
               :style="{background:titleId == 1 ?'url(' + require('@/assets/images/menu_icon.png') +') -62px -667px':titleId == 4 ?'url(' + require('@/assets/images/menu_icon.png') +') -62px -667px':'url(' + require('@/assets/images/menu_icon.png') +') -62px -752px'}">
          </div>
          <p :class="titleId == 1 ? 'is-active' : ''">工单</p>
        </div>
        <div class="text-center-titel"
             @click="systemServe"
             v-show="btnStates.EWS_order_manage">
          <div class="interact"
               :style="{background:titleId == 2 ?'url(' + require('@/assets/images/menu_icon.png') +') -62px -330px':titleId == 5 ?'url(' + require('@/assets/images/menu_icon.png') +') -62px -330px':'url(' + require('@/assets/images/menu_icon.png') +') -62px -413px'}">
          </div>
          <p :class="titleId == 2 ? 'is-active' : ''">系统管理</p>
        </div>
        <div class="text-center-titel"
             @click="dataShow">
          <div class="interact">
          </div>
          <p :class="titleId == 3 ? 'is-active' : ''">数据分析</p>
        </div>
      </el-aside>
      <el-container class="contant-detail"
                    style="border-radius:20%">
        <!-- <color-picker style="display:none" v-if="themeColor" :theme="themeColor"></color-picker> -->
        <el-aside width="0"
                  class="border work-order-bg rolling-style"
                  v-show="titleId == 0">
        </el-aside>
        <!-- <el-aside width="14%"
                  class="border work-order-bg rolling-style"
                  v-show="titleId == 1">
          <work-order></work-order>
        </el-aside> -->
        <el-aside width="14%"
                  class="border work-order-bg rolling-style"
                  v-show="titleId == 2">
          <system-config></system-config>
        </el-aside>
        <el-aside width="14%"
                  class="border work-order-bg rolling-style"
                  v-show="titleId == 3">
          <data-show></data-show>
        </el-aside>
        <el-main class="rolling-style  rolling-style-main">
          <!-- isRouterAlive页面同步刷新 -->
          <!-- <keep-alive> -->
          <router-view v-if="$route.meta.keepAlive" />
          <!-- </keep-alive> -->
          <router-view v-if="!$route.meta.keepAlive && isRouterAlive" />
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
// import Cookies from 'js-cookie'
import WorkOrder from '@/components/form/WorkOrder'
import SystemConfig from '@/components/form/SystemConfig'
import dataShow from '@/components/form/dataShow'
import colorPicker from './colorPicker'
import { selectAll } from './api/userController'
import {
  themeColor
} from "@/api/eripDataSynController.js"
export default {
  name: 'app',
  // 页面同步刷新
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      // themeColor: '',
      activeIndex: 'crm',
      titleId: 0,
      urlOrder: '',
      options: [],
      userId: '',
      isRouterAlive: true, // 页面同步刷新
      test: window.CONFIG.test,
      ewsSso: window.CONFIG.ewsSso,
      btnStates: window.CONFIG.btnState,
    }
  },
  components: {
    WorkOrder,
    SystemConfig,
    colorPicker,
    dataShow
  },
  computed: {
    userIds () {
      return this.$store.state.userId
    },
    themeColor () {
      let themeSign = window.document.documentElement.getAttribute('data-theme')
      let theme = ''
      if (themeSign == "theme0") { // 产品
        theme = '#3167af'
      } else if (themeSign == "theme1") { // 正泰 
        theme = '#3167af'
      } else if (themeSign == "theme2") { // 锦程
        theme = '#0076F2'
      } else if (themeSign == "theme3") { // 重庆农商行
        theme = '#e2585c'
      } else if (themeSign == "theme4") { // 浙能
        theme = '#E94A08'
      }
      return theme
    }
  },
  watch: {// 监听路由变化
    // themeColor (newVal, oldVal) {
    //   this.themeColor = newVal
    // },
    $route (to, from) {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      document.querySelectorAll('.rolling-style').forEach(item => {
        item.scrollTop = 0
      })
      if (Number(to.params.id) > 1000) {
        this.$store.commit('orderDetailsIdFun', to.params.id)
      }
      let urlRoutes = to.path
      urlRoutes = urlRoutes.split('/')
      this.urlOrder = urlRoutes[1]
      // 0 ---交互页面   1 ---工单页面   2 ---系统设置页面的  3-- 数据分析 4/5 防止改变了原有titleId的zhi
      if (this.urlOrder === 'orderTable' || this.urlOrder === 'orderHisoryData') {
        this.titleId = 1
      } else if (this.urlOrder === 'createForm' || this.urlOrder === 'handleForm' || this.urlOrder === 'formDetails' || this.urlOrder === 'historyInfoDetail') {
        this.titleId = 4
      } else if (this.urlOrder === 'createWorkOrderType' || this.urlOrder === 'orderEditMenu' || this.urlOrder === 'customEditMenu' || this.urlOrder === 'createStatus' || this.urlOrder === 'makeForm' || this.urlOrder === 'createWorkTrigger' || this.urlOrder === 'createCustomField') {
        this.titleId = 5
      } else if (this.urlOrder === 'customList' || this.urlOrder === 'lookOrder' || this.urlOrder === 'orderHistory') {
        this.titleId = 0
      } else if (this.urlOrder === 'newSetNotice' || this.urlOrder === 'newSetNoticeTemplate' || this.urlOrder === 'newSetNoticeTemplateEmail' || this.urlOrder === 'newSetNoticeTemplateMessage') {
        // 通知设置去掉menu
        this.titleId = 0
      } else if (this.urlOrder === 'dataAnalysisShow') {
        this.titleId = 3
      } else {
        this.titleId = 2
      }
      if (this.urlOrder !== 'customMenu') {
        this.$store.commit('optionTypeFun', '1')
      }
      // 清空按钮显示的判断条件
      if (this.urlOrder !== 'orderTable') {
      }
      // 其他页面切换回来到工单-交互页面的时候，默认展示工单历史页面
      if (this.urlOrder !== 'customList') {
        this.$store.commit('typeDataFun', 1)
      }
    }
  },
  created () {
    // this.getUserInfoData()
  },
  mounted () {
    // this.getThemeColor()
    let urlRoutes = this.$route.path
    urlRoutes = urlRoutes.split('/')
    if (urlRoutes[1] === 'customField' || urlRoutes[1] === 'workStatus' || urlRoutes[1] === 'formWork' || urlRoutes[1] === 'workType' || urlRoutes[1] === 'customMenu') {
      this.titleId = 2
      this.systemServe()
    } else if (urlRoutes[1] === 'customList') {
      this.titleId = 0
      this.interact()
    } else if (urlRoutes[1] === 'orderTable' || urlRoutes[1] === 'orderHisoryData') {
      this.titleId = 1
      this.wordOrder()
    }
    this.getUserInfo()
  },
  methods: {
    logout () {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.location = '/ews/logout'
      }).catch(() => {
      });
    },
    // 获取主题色调
    // getThemeColor () {
    //   let _this = this
    //   // sessionStorage.setItem('theme','theme3')
    //   themeColor().then(res => {
    //     if (res.data.retCode == 200) {
    //       let thememColor = (res.data.data.length>0 && res.data.data[0].codeValue) ? res.data.data[0].codeValue : 'theme3'
    //       // setTimeout(()=>{
    //         if (thememColor == "theme0") { // 产品
    //           _this.themeColor =  '#3167af'
    //           sessionStorage.setItem('theme',thememColor)
    //         } else if (thememColor == "theme1") { // 正泰 
    //           _this.themeColor =  '#3167af'
    //           sessionStorage.setItem('theme',thememColor)
    //         } else if (thememColor == "theme2") { // 锦程
    //           _this.themeColor =  '#0076F2'
    //           sessionStorage.setItem('theme',thememColor)
    //         } else if (thememColor == "theme3") { // 重庆农商行
    //           _this.themeColor =  '#e2585c'
    //           sessionStorage.setItem('theme',thememColor)
    //         } else if (thememColor == "theme4") { // 浙能
    //           _this.themeColor =  '#E94A08'
    //           sessionStorage.setItem('theme',thememColor) 
    //         }
    //       // },4000)
    //      console.log('app',thememColor)
    //     }
    //   })
    // },
    // 页面初始加载完成之后,获取坐席id
    getUserInfoData () {
      this.$store.commit('userFun', window.parent.Agent.getCurrentAgent().agentId)
    },
    // 获取所有的用户列表
    getUserInfo () {
      selectAll().then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.options = data.data
        }
      })
    },
    // 页面同步刷新
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    // 改变userId
    changeUserId () {
      this.$store.commit('userIdFun', this.userId)
    },
    // 页面刷新默认停留的页面
    reloadPage () {
      this.titleId = 0
      // this.$router.replace('/customList')
    },
    wordOrder () {
      this.titleId = 1
      this.$router.push('/orderTable/' + this.$store.state.orderTypeId)
      // 再次点击的时候，初始化状态
      this.$store.commit('workOrderTypeIdFun', 0)
    },
    systemServe () {
      this.titleId = 2
      this.$router.push('/customField')
      // 再次点击的时候，初始化状态
      let params = {
        name: '自定义字段'
      }
      this.$store.commit('systemConfigTitFun', params)
    },
    interact () {
      this.titleId = 0
      this.$router.push('/customList')
    },
    dataShow () {
      this.titleId = 3
      this.$router.push('/dataAnalysisShow/1')
    },
    mouseOut () {
    }
  }
}
</script>

<style lang="scss">
.text-center-titel {
  text-align: center;
  cursor: pointer;
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100%;
  height: 100vh;
  overflow: hidden;
}
.header-bg {
  padding: 0;
  background: url(./assets/images/top-header-bg.png) no-repeat;
}

.interact {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.dingweifu {
  padding-top: 20px;
}

.text-center-titel > p {
  margin: 10px 0 40px;
  color: #9ba4ae;
}

.text-center-titel > .is-active {
  color: #4786c3;
  font-weight: 600;
}

.contant-detail {
  box-sizing: border-box;
}

.work-order-bg .el-menu {
  height: 100%;
  overflow-x: hidden;
}

.rolling-style {
  background-color: #fff;
  // height: 95%;
  overflow-y: auto;
  padding-bottom: 40px;
}
</style>
